<template name="livechatCurrentChats">
	{{#requiresPermission 'view-livechat-current-chats'}}
		<fieldset>
			<form class="form-inline" method="post">
				<div class="livechat-group-filters-wrapper">
					<div class="livechat-group-filters-container">
						<div class="livechat-current-chats-standard-filters">
							<div class="form-group">
								<label class="rc-input__label">
									<div class="rc-input__title">{{_ "Guest"}}</div>
									<div class="rc-input__wrapper">
										<input type="text" placeholder="{{_ "Name"}}" class="rc-input__element" name="name">
									</div>
								</label>
							</div>
							<div class="form-group">
								{{> livechatAutocompleteUser
									onClickTag=onClickTagAgent
									list=selectedAgents
									onSelect=onSelectAgents
									collection='UserAndRoom'
									endpoint='users.autocomplete'
									field='username'
									sort='username'
									label="Served_By"
									placeholder="Served_By"
									name="agent"
									icon="at"
									noMatchTemplate="userSearchEmpty"
									templateItem="popupList_item_default"
									modifier=agentModifier
									showLabel=true
								}}
							</div>
							<div class="form-group">
								<label class="rc-input__label">
									<div class="rc-input__title">{{_ "Status"}}</div>
									<div class="rc-select">
										<select class="rc-select__element" name="status">
											<option class="rc-select__option" value="">{{_ "All"}}</option>
											<option class="rc-select__option" value="opened">{{_ "Opened"}}</option>
											<option class="rc-select__option" value="closed">{{_ "Closed"}}</option>
										</select>
										{{> icon block="rc-select__arrow" icon="arrow-down" }}
									</div>
								</label>
							</div>
							<div class="form-group">
								<label class="rc-input__label">
									<div class="rc-input__title">{{_ "Department"}}</div>
									<div class="rc-select">
										<select class="rc-select__element" name="department">
											<option class="rc-select__option" value="">{{_ "Select_a_department"}}</option>
											{{#each departments}}
												<option class="rc-select__option" value="{{_id}}">{{name}}</option>
											{{/each}}
										</select>
										{{> icon block="rc-select__arrow" icon="arrow-down" }}
									</div>
								</label>
							</div>
							<div class="form-group input-daterange">
								<label class="rc-input__label">
									<div class="rc-input__title">{{_ "From"}}</div>
									<div class="rc-input__wrapper">
										<input autocomplete="off" type="text" placeholder="{{_ "Date_From"}}" class="rc-input__element" id="from" name="from" >
									</div>
								</label>
								<label class="rc-input__label">
									<div class="rc-input__title">{{_ "To"}}</div>
									<div class="rc-input__wrapper">
										<input autocomplete="off" type="text" placeholder="{{_ "Date_to"}}" class="rc-input__element" id="to" name="to">
									</div>
								</label>
							</div>

							<div class="form-group">
								<button type="button" class="rc-button rc-button--secondary add-filter-button livechat-current-chats-add-filter-button">{{> icon icon="plus" }}</button>
							</div>
						</div>

						<div class="livechat-current-chats-custom-filters">
							{{#each customFilters}}
								<div class="form-group">
									<label class="rc-input__label">
										<div class="rc-input__title">{{label}}</div>
										<div class="rc-input__wrapper">
											<input autocomplete="off" type="text" placeholder="{{label}}" class="rc-input__element" name="custom-field-{{name}}">
											<a href="#remove" class="remove-livechat-custom-filter" data-name="{{name}}"><i class="icon-trash"></i></a>
										</div>
									</label>
								</div>
							{{/each}}
							{{#each tagFilters}}
								<div class="form-group">
									<label class="rc-input__label">
										<div class="rc-input__title">{{_ "Tags"}}</div>
										<span class="livechat-current-chats-tag-filter-wrapper">
											{{> livechatRoomTagSelector}}
											<a href="#remove" class="remove-livechat-tags-filter" data-id="{{tagId}}"><i class="icon-trash"></i></a>
										</span>
									</label>
								</div>
							{{/each}}
						</div>
					</div>

					<div class="livechat-group-filters-buttons">
						<div class="rc-button__group">
							<button class="rc-button rc-button--primary">{{_ "Filter"}}</button>
							{{#if hasPopoverPermissions}}
								<button class="livechat-current-chats-extra-actions">
									{{> icon icon="menu" block="rc-icon--default-size"}}
								</button>
							{{/if}}
						</div>
					</div>
				</div>
			</form>
		</fieldset>
		<div class="rc-table-content">
			{{#table fixed='true' onScroll=onTableScroll onResize=onTableResize onSort=onTableSort}}
				<thead>
					<tr>
						<th width="25%">
							<div class="table-fake-th">{{_ "Name"}}</div>
						</th>
						<th width="15%">
							<div class="table-fake-th">{{_ "Department"}}</div>
						</th>
						<th width="15%">
							<div class="table-fake-th">{{_ "Served_By"}}</div>
						</th>
						<th width="15%">
							<div class="table-fake-th">{{_ "Started_At"}}</div>
						</th>

						<th width="15%">
							<div class="table-fake-th">{{_ "Last_Message_At"}}</div>
						</th>
						<th width="10%">
							<div class="table-fake-th">{{_ "Status"}}</div>
						</th>

						<th width="5%"><div class="table-fake-th">&nbsp;</div></th>
					</tr>
				</thead>
				<tbody>
					{{#each livechatRoom}}
						<tr class="rc-table-tr manage row-link" data-name="{{latest.name}}">

							<td>
								<div class="rc-table-wrapper">
									<div class="rc-table-info">
										<span class="rc-table-title">
											{{fname}}
										</span>
									</div>
								</div>
							</td>
							<td>{{department.name}}</td>
							<td>{{servedBy}}</td>
							<td>{{startedAt}}</td>
							<td>{{lastMessage}}</td>
							<td>{{status}}</td>
							{{#requiresPermission 'remove-closed-livechat-rooms'}}
								{{#if isClosed}}
									<td><a href="#remove" class="remove-livechat-room"><i class="icon-trash"></i></a></td>
								{{else}}
									<td>&nbsp;</td>
								{{/if}}
							{{else}}
								<td>&nbsp;</td>
							{{/requiresPermission}}
						</tr>
					{{/each}}
					{{#if isLoading}}
						<tr class="table-no-click">
							<td colspan="5" class="table-loading-td">{{> loading}}</td>
						</tr>
					{{/if}}
				</tbody>
			{{/table}}
		</div>
		{{#if hasMore}}
			<div class="rc-button__group">
				<button class="rc-button rc-button--primary js-load-more">{{_ "Load_more"}}</button>
			</div>
		{{/if}}
	{{/requiresPermission}}
</template>
